<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .classA {
      color: red;
    }
    .classB {
      font-size: larger;
    }
  </style>

  <body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
      <div>默认情况</div>
      <div v-bind:class="className">1、绑定classA</div>
      <div v-bind:class="className">1、绑定classA（简单写法 :class ）</div>
      <div :class="{classA:false}">2、绑定class中的判断(isOk=false)</div>
      <div :class="{classA:isOk}">2、绑定class中的判断(isOk=true)</div>
      <div :class="[classA,classB]">3、绑定class中的数组</div>
      <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
      <div :style="{color:red,fontSize:font}">5、绑定style</div>
      <div :style="styleObject">6、用对象绑定style样式</div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          className: "classA",
          isOk: true,
          classA: "classA",
          classB: "classB",
          styleObject: {
            fontSize: "24px",
            color: "green",
          },
        },
      });
    </script>
  </body>
</html>
